<template>
	<view class="bg container">
		<view class="">
			<!-- 头部 -->
			<view class="topWrap">
				<img :src="status==1?bgImg:img_gif" class="collectImg" :style="activeWidth">
				<view class="text-center topContent">
				</view>
                <view class="radius-20 bg u-flex u-col-center youxiguize u-p-20 u-m-r-40" @click="popshowguize = true">
                    <u-icon name="question-circle" :color="'#fff'" :size="34" class="u-m-r-10"></u-icon>
                    <view class="size-30">
                        游戏规则
                    </view>
                </view>
			</view>
		</view>

<!--        盲盒-->
        <view class="manghecontent">
            <view class="manghelist">
                <view class="manghe-iyem" v-for="(item,index) in mangheList" :key="index" @click="openmanghelist(index)">
                    <view class="no-shop">
                        <view class="manghe">
                            <view :class="item.id ? 'image-content-have':'image-content'">
                                <image :src="item.id?item.url:require('@/static/wakuang/5.png')"></image>
                            </view>
                        </view>
                        <view class="daitianjia">{{ item.id ? '更换' : '待添加' }}</view>
                    </view>
                </view>
            </view>
            <view class="miningState">
                <view class="miningBtn">
                    <!--				<view class="Recording" @click="miningRecord">游戏记录</view>-->
                    <!--				<view class="Recording" @click="rankList">游戏排行榜</view>-->
                    <view class="endBtn">
                        <view class="" v-if="status==1" @click="start">开始游戏</view>
                        <view class="" v-if="status==2" @click="final">结束游戏</view>
                    </view>
                </view>
            </view>
        </view>

		<!-- 挖矿 -->
		<u-popup  v-model="popshow" mode="center" :closeable="true" border-radius="14" length="70%">
			<view class="miningBg">
				<image src="../../static/home/wakuang.gif" mode="widthFix"></image>
			</view>
		</u-popup>
		<!-- 挖矿结果 -->
		<u-popup  v-model="popshow1" mode="center" :closeable="true" border-radius="14" length="70%">
			<view class="miningBg">
				<image style="width: 60%;" v-if="WinningStatus==1" src="../../static/home/kuangshi.png" mode="widthFix"></image>
				<image style="width: 60%;" v-else src="../../static/home/none.png" mode="widthFix"></image>
			</view>
			<view class="center">
				<view class="center congratulate" v-if="WinningStatus==1">恭喜你挖掘出了xx矿X2</view>
				<view class="center congratulate" v-else>什么都没挖到，再试试吧</view>
			</view>
			<view class="center">
				<view class="center chargeBtn" v-if="WinningStatus==1" @click="popshow1=false">立即收取</view>
				<view class="center chargeBtn" v-else @click="popshow1=false">确认</view>
			</view>
		</u-popup>
        <!-- 游戏规则 -->
        <u-popup  v-model="popshowguize" mode="bottom" :closeable="true" border-radius="14" length="50%">
            <view class="popcontent">
                <view class="poptitle">游戏规则</view>
                <view class=" infoWrap" v-html="info.content">

                </view>
            </view>

        </u-popup>
        <u-popup  v-model="popshowmanghe" mode="bottom" :closeable="true" border-radius="14" length="50%">
            <view class="popcontent">
                <view class="poptitle">选择藏品</view>
                <view class=" infoWrap">
                    <view class="mang-item u-flex u-row-between u-col-top u-p-20" v-for="(item,index) in mangheListAll" @click="choosemang(item)">
                        <view class="mangleft u-m-r-20">
                            <image :src="item.image" style="width: 120rpx;height: 120rpx;"></image>
                        </view>
                        <view class="mangright u-flex-1 u-flex u-row-left u-col-top u-flex-col">
                            <view class="mang-title u-m-t-10" style="font-size: 34rpx;font-weight:600">{{ item.name }}</view>
                            <view class="mang-sub-title u-m-t-10">{{ '共'+ item.tcount +'个' }}</view>
                        </view>
                    </view>
                </view>
            </view>

        </u-popup>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
                haveshop:true,
				activeWidth:{
					'width': '64%',
					'left': '16%',
                    'top':'61%'
				},
				bgImg:'',
                img_gif:'',
				timer: '',
				popshow: false,
				popshow1: false,
				timestamp: 40532,
				gifUrl: "../../static/open.gif",
				gifShow: false, //盲盒动图
				preShow: false,
				changeShow: false,
				afterPrice: '',
				id: '',
				box_id: '',
				transferPhone: '',
				transferShow: false,
				openfig: {},
				newOpenfig: [],
				openPop: false,
				openPop1: false,
				salePrice: '',
				saleShow: false,
				info: {
					goods: []
				},
				is_trade: 0,
				saleConfig: {},
				terracePrice: 0,
				authorPrice: 0,
				payPrice: 0,
				realPrice: 0,
				status: 1,
				winningPrize:'',
				WinningStatus:'',
                popshowguize:false,
                popshowmanghe:false,
                mangheList:[
                    {
                        url:'',
                        id:''
                    },
                    {
                        url:'',
                        id:''
                    },
                    {
                        url:'',
                        id:''
                    }
                ],
                mangheListAll:[],
                index_mang:0
			}
		},
		onLoad(options) {
            if(!options.id){
                this.id = 1
                uni.setNavigationBarTitle({
                    title:'气运矿场'
                })
            }else{
                this.id = options.id;
                uni.setNavigationBarTitle({
                    title:options.name
                })
            }
			this.init();
			this.$http('api/login/helpContent').then(res => {
				this.is_trade = res.is_trade;
                this.img_gif = res.img_gif;
            })
			this.$http('api/index/fee').then(res => {
				this.saleConfig = res;
			})
		},
		onBackPress() {
			//返回清除计时器
			this.final()
			
		},
		methods: {
            // 获取盲盒列表
            getinitMang() {
                this.mangheListAll = [];
                var status=0
                this.$http('api/orders/usersGoodsListGroup', {
                    page: 1,
                    pagesize: 100,
                    status: status
                }).then(res => {
                    this.mangheListAll = res;
                })
            },
            openmanghelist(index){
                this.popshowmanghe = true
                this.index_mang = index
                this.getinitMang()

            },
            // 选择盲盒
            choosemang(item){
                let obj = {
                    url:item.image,
                    id:item.id
                }
                this.$set(this.mangheList,this.index_mang,obj)
                this.popshowmanghe = false
            },
			// 终止挖矿
			final(){
				clearTimeout(this.timer)
				this.status=1
				// this.bgImg=this.info.notfound_image
				// this.activeWidth={
				// 	'width': '20%',
				// 	'left': '40%'
				// }
			},
			// 开始挖矿
			start(){
				console.log('开始挖矿')
				// this.popshow=true
				
				
				if(this.info.user_total_count-this.info.today_count>0){
					this.bgImg=this.info.in_process_image
					this.activeWidth={
                        'width': '64%',
                        'left': '16%',
                        'top':'61%'
					}
					this.status=2
					this.timer=setTimeout(()=>{
						console.log('终止')
						console.log('挖矿结束')
							this.$http('api/forge_task/task', {
								id: this.id
							}).then(res => {
								console.log(res)
								this.activeWidth={
                                    'width': '64%',
                                    'left': '16%',
                                    'top':'61%'
								}
								if(res.status==0){
									this.bgImg=this.info.notfound_image
									uni.showToast({
										icon:"none",
										image: res.image,
										title:'什么都没挖到，再试试吧'
									})
								}else{
									this.bgImg=this.info.reward_image
									uni.showToast({
										icon:"none",
										image: res.image,
										title: '恭喜你挖掘出了'+res.name
									})
								}
								// this.popshow=false
								// this.popshow1 = true
								this.winningPrize=res
								this.WinningStatus = res.status
								// this.status=1
								
								this.start()
							})
						
					},1000*this.info.time_interval)	
				}else{
					uni.showToast({
						icon:"none",
						title:'今日挖矿次数已用完'
					})
				}
			},
			closeOpen() {
				this.openPop = false;
				this.openPop1 = false;
				uni.navigateTo({
					url: './myBox?type=' + 6
				})
			},
			miningRecord(){
				uni.navigateTo({
					url:'./miningRecord?id='+this.id
				})
			},
			rankList(){
				uni.navigateTo({
					url:'./rankList?id='+this.id
				})
			},
			init() {
				this.$http('api/forge_task/taskDetail', {
					id: this.id
				}).then(res => {
					
					this.info = res[0];
					this.box_id=this.info.id
					this.bgImg=this.info.in_process_image
					console.log(this.info.time_interval)
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
page{
    background: #000000;
}
	.container{
		//background: linear-gradient(to bottom,#E2DFFE,#FFFFFF);
		position: relative;
		.miningBg{
			text-align: center;
			image{
				width: 80%;
				margin: 0 auto;
			}
		}
		.congratulate{
			color: #A87A4E;
			font-weight: bold;
			font-size: 34rpx;
		}
		.chargeBtn{
			width: 260rpx;
			margin: 40rpx auto;
			height: 80rpx;
			border-radius: 20rpx;
			background: linear-gradient(to left,#2A2A2A,#585858);
			line-height: 80rpx;
			color: #fff;
		}
		.miningState{
			width: 100%;
			// height: 400rpx;
			text-align: center;
			padding: 0 10%;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx;
			image{
				width: 120rpx;
				height: 120rpx;
				margin-top: 40rpx;
			}
			.state{
				display: flex;
				justify-content: center;
				margin: 40rpx 0;
				color: #1690FD;
				::v-deep  .u-countdown-time{
					color: #1690FD !important;
				}
				::v-deep  .u-countdown-colon{
					color: #1690FD !important;
				}
			}
			.miningBtn{
				display: flex;
				justify-content: center;
				.endBtn{
                    width: 40%;
					view{
						width: 100%;
						background: url(/static/wakuang/youxi@2x.png) no-repeat center;
                        background-size: 100%;
						color: #fff;
                        padding: 0% 5% 0%;
                        height: 60px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
					}
					
				}
			}
		}
	}
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;

		uni-button {
			width: 30%;
			height: 80rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			line-height: 80rpx;
		}

		.transBtn {
			color: #fff;
			background: linear-gradient(to right,#585858,#2A2A2A);
		}

		.saleBtn {
			color: #333333;
			background: transparent;
			border: 1rpx solid #2A2A2A;
		}
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #44ACFF;
		border-radius: 40rpx;
		width: 210rpx;
	}

	.tipsLeft {
		background: rgb(42,42,42);
		color: #fff;
		border-radius: 24rpx 0 0 24rpx;
		border: 1rpx solid rgb(42,42,42);
	}
	.tipsRight{
		border-radius:0 24rpx 24rpx 0;
		width:116rpx;
		// padding: 0rpx 20rpx;
		border: 1rpx solid rgb(42,42,42);
		color: #000;
	}
	.collectImg {
		// width: 60%;
		display: block;
		margin: 0 auto;
		height: auto;
		position: absolute;
		bottom: 20%;
		// left: 20%;
		// border: 20rpx solid #fff;
		// border-radius: 20rpx;
	}
	.openBtn{
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		color: #fff;
		letter-spacing: 3rpx;
		margin-top: 40rpx;
		background: linear-gradient(to right,#585858,#2A2A2A);
	}
	.topWrap {
		background: url(../../static/wakuang/2.jpg) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 926rpx;
		padding-top: 120rpx;
		position: relative;
	}

	.infoWrap {
		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
        .mang-item{
            background: #f8f8f8;
            border-radius: 10px;
        }
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}
	
	.popWrap ,.popBlindBox{
		background: url(../../static/openImg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 500rpx;
		height: 526rpx;
		padding-top: 128rpx;
		position: relative;

		.openImg {
			width: 240rpx;
			height: 240rpx;
			background: #666;
		}
	}
	.popBlindBox{
			// width: 500rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-right: 20px;
			padding-left: 20px;
			.popItem{
				width: 30%;
				.openImg {
					width: 120rpx;
					height: 120rpx;
					background: #666;
				}
			}
	}
	.openGif {
		width: 500rpx;
		height: 500rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 500rpx;
			height: 500rpx;
		}
	}

	.closeIcon {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx auto;
		display: block;
	}

	.openWrap {
		::v-deep  .u-mode-center-box {
			background-color: transparent;
		}
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 120rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
    .youxiguize{
        color: #fff;
        background: rgba(0,0,0,0.4);
        border-radius: 40rpx;
        float: right;
        margin-top: -60rpx;
    }
    .popcontent{
        padding: 0 30rpx 30rpx 30rpx;
        .poptitle{
            height: 100rpx;
            width: 100%;
            text-align: center;
            font-size: 34rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .infoWrap{
            margin-top: 20rpx;
            font-size: 28rpx;
        }
    }
    .manghecontent{
        min-height: 440rpx;
        background: url(/static/wakuang/beijing@2x.png) no-repeat center;
        background-size: 100%;
        margin-left: 20rpx;
        margin-right: 20rpx;
        padding:0rpx 20rpx;
        .manghelist{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 58rpx;
        .manghe-iyem{
            width: 33%;
            height: 240rpx;
            background: url(/static/wakuang/biankuang@2x.png) no-repeat center;
            background-size: 100%;
            .no-shop{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                .manghe{
                    width: 100%;
                    height: 82%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .image-content{
                        width: 60%;
                        height: 60%;
                        image{
                        width: 100%;
                        height: 100%;
                        }
                    }
                    .image-content-have{
                        width: 90%;
                        height: 90%;
                        margin-left: 14rpx;
                        image{
                            width: 95%;
                            height: 100%;
                        }
                    }

                }
                .daitianjia{
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #fff;
                    height: 48rpx;
                ;
                }
            }
            .have-shop{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                .manghe{
                    width: 100%;
                    height: 60%;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .daitianjia{
                    font-size: 30rpx;
                    font-weight: 600;
                    color: #fff;
                }
            }
        }
    }
    }
</style>
